<template>
 <div id="map">

 </div>
</template>

<script lang="ts">
import { defineComponent,nextTick,onMounted} from 'vue';
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import '@geoman-io/leaflet-geoman-free';  
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';  
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data(){
    return{
      map:null
    }
  },
  // methods:{
  //   getMap(){
  //      const map=L.map("map", {
  //             center: [40.02404009136253, 116.50641060224784], // 地图中心
  //             zoom: 12, // 缩放比列
  //             zoomControl: false, // 禁用 + - 按钮
  //             doubleClickZoom: false, // 禁用双击放大
  //             attributionControl: false, // 移除右下角leaflet标识
  //           })
  //         L.tileLayer(
  //           "https://maps.huidatech.cn/e173754b3b1bbd62a0be9c4afea73fdf/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Gali"
  //         ).addTo(map);
         
  //         map.pm.addControls({
  //           position: "topleft",
  //           drawPolygon: false, // 添加绘制多边形
  //           drawMarker: true, // 添加按钮以绘制标记
  //           drawCircleMarker: false, // 添加按钮以绘制圆形标记
  //           drawPolyline: false, // 添加按钮绘制线条
  //           drawRectangle: true, // 添加按钮绘制矩形
  //           drawCircle: false, //  添加按钮绘制圆圈
  //           editMode: true, //  添加按钮编辑多边形
  //           dragMode: true, //   添加按钮拖动多边形
  //           cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
  //           removalMode: true, // 清除图层
  //         });
  //         // 设置绘制线条颜色
  //         map.pm.setPathOptions({
  //           color: "orange",
  //           fillColor: "green",
  //           fillOpacity: 0.4,
  //         });
  //         map.pm.setLang("zh");
  //   }
  // },
  // mounted(){
  //   this.$nextTick(()=>{
  //       this.getMap();
  //   })
     
  // }
  setup(){
    onMounted(()=>{
        console.log("我被调用了");
        function initDate() {
          const map=L.map("map", {
              center: [40.02404009136253, 116.50641060224784], // 地图中心
              zoom: 12, // 缩放比列
              zoomControl: false, // 禁用 + - 按钮
              doubleClickZoom: false, // 禁用双击放大
              attributionControl: false, // 移除右下角leaflet标识
            })
          let name2:any  = L.tileLayer(
            "https://maps.huidatech.cn/e173754b3b1bbd62a0be9c4afea73fdf/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Gali"
          );
          name2.addTo(map)
          console.log(map,'34');
          map.pm.addControls({
            position: "topleft",
            drawPolygon: true, // 添加绘制多边形
            drawMarker: true, // 添加按钮以绘制标记
            drawCircleMarker: false, // 添加按钮以绘制圆形标记
            drawPolyline: false, // 添加按钮绘制线条
            drawRectangle: true, // 添加按钮绘制矩形
            drawCircle: false, //  添加按钮绘制圆圈
            editMode: true, //  添加按钮编辑多边形
            dragMode: true, //   添加按钮拖动多边形
            cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
            removalMode: true, // 清除图层
          });
          // 设置绘制线条颜色
          map.pm.setPathOptions({
            color: "orange",
            fillColor: "green",
            fillOpacity: 0.4,
          });
          map.pm.setLang("zh"); // 设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
          //getlatLngs();
        }
        
        nextTick(()=>{
          initDate();
        })
        return {
          initDate
        }
        }) 
  }

});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html,body,#app{
  width: 100%;
  height: 100%;
}
#map{
  height:100%;
  width:100%;
}
</style>
